<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="data" label="时间" width="300"> 
      </el-table-column>
      <el-table-column prop="course" label="课程类型" width="300">
      </el-table-column>
      <el-table-column prop="name" label="课程名称" width="300">
      </el-table-column>
      <el-table-column prop="describe" label="描述" width="300">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      type="primary"
      placement="right"
      icon="el-icon-edit"
      @click="dialogVisible = true"
      >添加</el-button
    >
    <el-dialog
      title="立即创建"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-form ref="form :model" label-width="100px">
        <el-form-item label="创建时间">
          <el-input v-model="form.data"></el-input>
          </el-form-item>
        <el-form-item label="课程类型">
          <el-input v-model="form.course"></el-input>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="课程简介">
          <el-input v-model="form.describe"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" >立即创建</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      form: {
        data:"",
        course: "",
        name: "",
        describe: "",
      },
      dialogVisible: false,
      tableData: [
        {
          data: "2020-1-15",
          course: "map",
          name: "数学",
          describe: "算数"
        },
        {
          data: "2022-2-1",
          course: "course",
          name: "语文",
          describe: "天文地理"
        },
        {
          data: "2022-1-15",
          course: "physics",
          name: "物理",
          describe: "生物知识"
        },
        {
          data: "2011-1-15",
          course: "history",
          name: "历史",
          describe: "人文"
        },
      ],
    };
  },
  methods: {
    handleDelete(index) {
      this.tableData.splice(index, 1);
    },
    onSubmit() {
      console.log('form', this.form)
    this.tableData.push(JSON.parse(JSON.stringify(this.form)));
    this.dialogVisible=false;
        this.form={
        data:'',
        course:'',
        name:'',
        describe:''
    }
    }
    // {
      // data:this.form.data,
      // course:this.form.course,
      // name:this.form.name,
      // describe:this.form.describe,}
      // )
      // console.log(1);
    // },
  // },
  // handleClose(done) {
  //   this.$confirm("确认关闭？")
  //     .then(() => {
  //       done();
  //     })
  //     .catch(() => {});
  // },
  
// };
  }
}
</script>
